<html>
	<head>
	<title>Expandable List Behavior Demo</title>
<style type="text/css"> 
	body { 
	  font-family:"Century Gothic","Tahoma"; 
	  font-size:10pt; 
	  padding: 10px;
	  width:100%%; height:100%%;  
	  background-color: #e9e8f3;
	}

	#thebar 
	{
	  width:100%%;	  
	  height:max-intrinsic;
    min-height:48px;
	  margin:0;
    padding:0;    
	  border:1px solid #bdbccc;
	  background-color: #fff;
	  behavior:expandable-list;
	  flow:horizontal;
	  overflow-y:hidden;
	  overflow-x:hidden;
	}
	
	#thebar > li 
	{
	   transition:slide; /* sliding! */
	   flow:horizontal;
	   list-style-type:none;
	   width:min-intrinsic; /* natural width */
     background-color: #F4F3F9;
     height:100%%;
	} 

  #thebar > li > .caption
	{
	  width:48px;
	  height:100%%;
	  text-align:center;
	  vertical-align:middle;
	  background-image:url(images/outlook/tab.png);
	  background-repeat:expand stretch-left stretch-right stretch-middle;
	  background-position:3px 3px 3px 3px;
	} 

  #thebar > li:collapsed > .caption:hover
	{
	  transition:blend;
    background-image:url(images/outlook/tab-hover.png);
	} 
  
  #thebar > li:collapsed > .caption:active
	{
    background-image:url(theme:button-pressed);
	} 
	
  #thebar > li:expanded
	{
      width:100%%; /* whole idea - it takes all available space */ 	  
	}
  
   #thebar > li:expanded > .caption
	{
	  background-image:none; 
	} 

	
	#thebar > li > .content 
	{
    //display:none;	 /* hidden by default */ 
    visibility: collapse;
    vertical-align: middle;
    white-space: nowrap;
	  height:100%%; 
	  width:0;
	}
	#thebar > li:expanded > .content 
	{
    //display:block; /* visible */
    visibility: visible;
    overflow-x:hidden;
	  width:100%%; 
	}
  
  

</style>
	</head>
	<body>
	  <h3>Horizontally sliding bar</h3>
		<ul id="thebar" name="sliding bar">
			<li default>
			    <div class="caption"><img src="images/4.gif"></div>
			    <div class="content">content of bar #1</div>
			</li>
			<li>
			    <div class="caption"><img src="images/2.gif"></div>
			    <div class="content" style="font:system">
            font: <select size=1>
              <option selected>Arial</option>
              <option>Tahoma</option>
              <option>Verdana</option>
              </select> <select size=1>
              <option selected>10pt</option>
              <option>12pt</option>
              <option>14pt</option>
              </select><br>
              alignment, left: <input type="radio" name="alignment"> center:<input type="radio" name="alignment"> right:<input type="radio" name="alignment">
          </div>
			</li>
			<li>
			    <div class="caption"><img src="images/7.gif"></div>
			    <div class="content">content of bar #3</div>
			</li>
		</ul>
	</body>
</html>
